<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <!-- 本地Bootstrap 5 CSS和JS -->
  <link rel="stylesheet" href="lib/bootstrap-5.3.3/bootstrap.min.css">
  <script type="text/javascript" src="lib/jquery/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="lib/bootstrap-5.3.3/bootstrap.bundle.min.js"></script>
  <!-- Bootstrap Icons -->
  <link rel="stylesheet" href="lib/bootstrap-icons/font/bootstrap-icons.css">
  <style>
    /* 自定义样式 */
    body {
      background-color: #333;
    }
    .login-container {
      max-width: 400px;
      margin: 0 auto;
      padding: 40px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
      margin-top: 100px;
    }
    .login-container h2 {
      margin-bottom: 30px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="login-container">
      <h2 class="text-center">登&nbsp;&nbsp;录</h2>
      <form id="loginForm">
        <div class="mb-3">
          <label for="email" class="form-label">账号</label>
          <input type="text" class="form-control" id="email" aria-describedby="emailHelp" placeholder="账号/邮箱" spellcheck="false" autocomplete="off">
          <div id="emailHelp" class="form-text"></div>
        </div>
        <div class="mb-3">
          <label for="password" class="form-label">密码</label>
          <div class="input-group">
            <input type="password" class="form-control" id="password" placeholder="密码" spellcheck="false" autocomplete="off">
            <button class="btn btn-outline-secondary" type="button" id="togglePassword"><i class="bi bi-eye-slash"></i></button>
          </div>
        </div>
        <!-- <div class="mb-3 form-check">
          <input type="checkbox" class="form-check-input" id="remember">
          <label class="form-check-label" for="remember">记住我</label>
        </div> -->
        <br/>
        <button type="submit" class="btn btn-primary w-100 btn-block">登录</button>
      </form>
    </div>
  </div>

  <script>
    // 密码显示/隐藏切换
    $(document).ready(function(){
      $('#togglePassword').click(function(){
        const type = $('#password').attr('type') === 'password' ? 'text' : 'password';
        $('#password').attr('type', type);
        $(this).find('i').toggleClass('bi-eye bi-eye-slash');
      });

      $('#loginForm').on('submit', function(event) {
        event.preventDefault();
        const username = $('#email').val();
        const password = $('#password').val();

        $.ajax({
          url: '/user/login',
          method: 'POST',
          contentType: 'application/json',
          data: JSON.stringify({
            username: username,
            password: password
          }),
          success: function(response) {
            if (response.code === 200 && response.data && response.data.token) {
              //saveToken(response.data.token);
              // 其他处理逻辑，例如跳转到主页面
              saveData(response.data);
              console.log('登录成功！');
              // 跳转到主页
              window.location.href = '/'; // 替换为实际的主页地址
            } else {
              console.log('登录失败：' + response.message);
            }
          },
          error: function() {
            console.log('请求出错，请稍后重试');
          }
        });
      });
    });

    function saveData(data) {
      localStorage.setItem('authToken', data.token);
      localStorage.setItem('user', JSON.stringify(data.user));
      localStorage.setItem('dictList', JSON.stringify(data.dictList));
      localStorage.setItem('menuList', JSON.stringify(data.menuList));
    }

    function saveToken(token) {
      localStorage.setItem('authToken', token);
    }

    function getToken() {
      return localStorage.getItem('authToken');
    }

    function removeToken() {
      localStorage.removeItem('authToken');
    }

  </script>
</body>
</html>
